// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;

.section-intro {
    background:
        url('/media/img/newsletter/developer/8bit_hearts.svg') top 85px center no-repeat,
        url('/media/img/newsletter/developer/bg_image.png') top center no-repeat,
        #000;

    @include background-size(66px 44px, auto auto);
    min-height: 230px;
    width: 100%;

    h1 {
        color: $color-white;
        margin-top: 110px;
        text-align: center;
    }

    @media #{$mq-sm} {
        @include background-size(96px 64px, auto auto);
        background-position: top 85px center, top center;
        height: 290px;

        .page-title {
            @include text-title-xl;
            margin-top: 150px;
        }
    }

    @media #{$mq-md} {
        @include background-size(116px 74px, auto auto);
        background-position: top 85px center, top center;
        height: 341px;
    }

    @media #{$mq-md} and #{$mq-short} {
        @include background-size(116px 74px, auto auto);
        background-position: top 85px center, top center;
        height: 290px;
    }
}

.section-subscribe {
    background: $color-white;
    padding: $spacing-lg 0;

    h2 {
        @include text-title-xs;
        color: $color-blue-70;
        font-weight: normal;
        line-height: 1.3;
        margin: $spacing-lg auto $spacing-xl;
        max-width: 32em;
        text-align: center;
    }
}

.mzp-c-newsletter-thanks {
    text-align: center;
}
